<template>
  <div class="add-copy">
    <Navbar :title="'住院病案申请'"></Navbar>
    <div class="step">
      <!-- 生成步骤图 -->
      <div
        class="step-item"
        @click="changeFlag(1)"
        :style="flag == 1 ? 'color: rgb(8, 75, 255);' : ''"
      >
        <img src="@/assets/tabs/first.png" alt="" />
        <h4>基本信息</h4>
      </div>
      ------
      <div
        class="step-item"
        @click="changeFlag(2)"
        :style="flag == 2 ? 'color: rgb(8, 75, 255);' : ''"
      >
        <img src="@/assets/tabs/second.png" alt="" />
        <h4>复印内容</h4>
      </div>
      ------
      <div
        class="step-item"
        @click="changeFlag(3)"
        :style="flag == 3 ? 'color: rgb(8, 75, 255);' : ''"
      >
        <img src="@/assets/tabs/three.png" alt="" />
        <h4>邮寄方式</h4>
      </div>
    </div>
    <div class="content" v-show="flag == 1">
      <h4 style="text-align: start; margin-left: 30px; line-height: 50px">
        请完善一下基本信息
      </h4>
      <div class="form">
        <van-form>
          <van-cell-group inset>
            <van-field
              v-model="username"
              name="username"
              label="患者名称"
              placeholder="请输入患者名称"
              :rules="[{ required: true, message: '请填写患者名称' }]"
            />
            <van-field
              v-model="card"
              name="card"
              label="身份证号"
              placeholder="请输入身份证号"
              :rules="[{ required: true, message: '请填写身份证号' }]"
            />
            <van-field
              v-model="phone"
              name="phone"
              label="本人电话"
              placeholder="请输入电话号码"
              :rules="[{ required: true, message: '请填写电话号码' }]"
            />
            <van-field
              v-model="admissNumber"
              name="admissNumber"
              label="住院号"
              placeholder="请输入住院号"
              :rules="[{ required: true, message: '请填写住院号' }]"
            />
          </van-cell-group>
        </van-form>
        <div style="margin: 16px">
          <van-button block type="primary" @click="next(2)"> 下一步</van-button>
        </div>
      </div>
    </div>
    <div class="content" v-show="flag == 2">
      <div class="content-header1">
        <h4>选择复印内容</h4>
        <div class="num-box">
          <button @click="minus()">-</button>
          <span>{{ num }}</span>
          <button @click="add()">+</button>
        </div>
      </div>
      <div class="content-header1" style="margin-top: 10px">
        <h4>复印用途</h4>
        <div>
          <select name="select" id="" v-model="select" style="width: 100px; border: 0cap;outline: none;"> 
            <option value="医保报销">医保报销</option>
            <option value="复诊留存">复诊留存</option>
            <option value="保险理赔">保险理赔</option>
          </select>
        </div>
      </div>
      <div class="content-header2">
        <h4>复印内容</h4>
        <div class="all">
          <!-- //当list中有选中的值,样式改变 -->
          <span
            :style="
              list.includes(item)
                ? 'background: rgb(0, 119, 255);color: white;'
                : ''
            "
            v-for="item in data"
            :key="item"
            class="item1"
            @click="click(item)"
          >
            {{ item }}
          </span>
        </div>
      </div>
      <div style="margin: 16px; box-sizing: border-box">
        <van-button block type="primary" @click="next(3)"> 下一步</van-button>
      </div>
    </div>
    <div class="content" v-show="flag == 3">
      <div class="map" @click="clickMap">
        <div class="left">
          <img
            src="@/assets/tabs/address.png"
            alt=""
            style="margin-right: 20px"
          />
        </div>
        <div class="right">
          <p>
            <span style="margin-right: 20px">{{ details.name }}</span>
            <span>{{ phone }}</span>
          </p>
          <p>
            <span>{{ address }}</span>
          </p>
        </div>
      </div>
      <div class="div">
        <div
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <h4>复印内容</h4>
          <span>份数：{{ num }}份</span>
        </div>
        <div>
          <p v-for="(item, index) in list" :key="index">
            <span>{{ index + 1 }}、</span>{{ item }}
          </p>
        </div>
      </div>
      <div class="div">
        <h4>费用金额</h4>
        <p>
          病案复印件预付款
          <span> ￥100.00 </span>
        </p>
      </div>
      <div class="div">
        <h4>服务须知</h4>
        <p>
          1、支付复印费预付款100元，根据实际打印张数计算价格后多退少补；每张复印纸为0.5/张;
        </p>
        <p>2、邮寄费用为顺丰到付，由患者自费;</p>
      </div>
      <div style="margin: 16px; box-sizing: border-box">
        <van-button block type="primary" @click="submit()">
          确定提交</van-button
        >
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import axios from "axios";
import Navbar from "./component/Navbar.vue";
import { onMounted, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();

const flag = ref(1);
const username = ref("");
const card = ref("");
const admissNumber = ref("");
const phone = ref("");
const num = ref<number>(1);
const select = ref("医保报销");
// 如果有数据获取没有不返回
onMounted(() => {
  if (route.query.name) {
    flag.value = 3;
    // 将传递过来的数据赋值给details
    address.value = route.query.name as string;
  }
});
const data = ref([
  "住院病案首页",
  "入院记录",
  "出院记录",
  "病历记录",
  "检验报告",
  "检查报告",
  "体温单",
  "长期医嘱",
  "入院证",
]);
const details = ref({
  name: "张三",
});
const address = ref("请选择地址");
const list = ref(JSON.parse(sessionStorage.getItem("list") || "[]"));

const changeFlag = (type: number) => {
  if (type === 1) {
    flag.value = 1;
  } else if (type == 2) {
    flag.value = 2;
  } else {
    flag.value = 3;
  }
};

const next = (value: number) => {
  flag.value = value;
};

const click = (item: string) => {
  console.log(11111);
  if (list.value.includes(item)) {
    list.value.splice(list.value.indexOf(item), 1);
  } else {
    list.value.push(item);
  }
  sessionStorage.setItem("list", JSON.stringify(list.value));
};
const submit = async () => {
  console.log(111111);
  let obj = {
    username: username.value,
    card: card.value,
    admissNumber: admissNumber.value,
    phone: phone.value,
    address: address.value,
    list: list.value,
    name: details.value.name,
    num:num.value,
  };
  let {
    data: { code, msg },
  } = await axios.post("http://localhost:3000/zhc/addCopy", obj);
};
const add = () => {
  num.value++;
  // 存储到pinia
};
const minus = () => {
  num.value--;
};

const clickMap = () => {
  router.push("/position");
};
</script>

<style scoped lang="scss">
.add-copy {
  width: 100%;
  height: 100%;
  background-color: white;
  overflow: hidden;
  .step {
    margin-top: 45px;
    width: 100%;
    height: 90px;
    position: fixed;
    top: 0px;
    left: 0;
    z-index: 999;
    display: flex;
    justify-content: space-around;
    background-color: rgb(242, 242, 239);
    align-items: center;
    .step-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }
  .content {
    margin-top: 136px;
    height: calc(100vh - 46px);
    background-color: rgb(242, 242, 239);
    overflow: hidden;
    .header {
      padding: 20px 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      line-height: 20px;
      box-sizing: border-box;
      .span {
        border-left: 5px solid rgb(0, 119, 255);
        padding: 0px 10px;
      }
      box-sizing: border-box;
    }
    .item {
      padding: 15px 15px;
      display: flex;
      justify-content: start;
      align-items: center;
      background-color: white;
      border-radius: 10px;
      .left {
        margin-right: 20px;
      }
      .right {
        display: flex;
        flex-direction: column;
        line-height: 30px;
      }
    }
    .content-header1 {
      padding: 10px 20px;
      display: flex;
      box-sizing: border-box;
      justify-content: space-between;
      background-color: white;
      .num-box {
        button {
          width: 30px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          border-radius: 50%;
          background-color: #f5f5f5;
          border: 1px solid #e6e6e6;
          margin-right: 10px;
        }
      }
    }
    .content-header2 {
      padding: 10px 20px;
      width: 100vw;
      background-color: white;
      margin-top: 10px;
      overflow: hidden;
      .all {
        width: 100vw;
        display: flex;
        flex-wrap: wrap;
        margin-top: 10px;
        .item1 {
          padding: 10px;
          box-sizing: border-box;
          border-radius: 5px;
          background-color: gainsboro;
          margin: 10px;
        }
      }
    }
    .map {
      padding: 15px;
      box-sizing: border-box;
      width: 100%;
      height: 80px;
      background-color: white;
      display: flex;
      justify-content: start;
      align-items: center;
      .right {
        line-height: 30px;
      }
    }
    .div {
      padding: 15px;
      box-sizing: border-box;
      width: 100%;
      background-color: white;
      margin-top: 10px;
      line-height: 25px;
    }
  }
}
</style>